<script>
  import { tweened } from "svelte/motion";
  import { expoInOut } from "svelte/easing";
  let val = 0;
  const add10 = () => {
    val += 0.1;
    progress.set(val);
  };
  const reduce10 = () => {
    val -= 0.1;
    progress.set(val);
  };
  const progress = tweened(val, {
    duration: 500,
    easing: expoInOut,
  });
</script>

<main>
  <h1>补间动画</h1>
  <progress value={$progress}></progress>
  <p>
    <button on:click={add10}>+0.1</button>
  </p>
  <p>
    <button on:click={reduce10}>-0.1</button>
  </p>
</main>
